<template>
  <div class="form-group border-b">
    <label class="input-label" for>{{label}}</label>
    <input
      class="form-control"
      ref="_inut"
      :maxlength="maxLength"
      :placeholder="placeholder"
      v-model="dateValue"
      readonly="readonly"
      @click="openPicker"
    >
    <!-- <el-date-picker class="input-class" v-model="value1" type="date" placeholder="选择日期"></el-date-picker> -->
    <mt-datetime-picker
      v-model="pickerValue"
      ref="picker"
      type="date"
      year-format="{value}"
      month-format="{value}"
      date-format="{value}"
      :startDate="startDate"
      :endDate="endDate"
      @confirm="handleConfirm"
    ></mt-datetime-picker>
  </div>
</template>

<script>
import { DatetimePicker, Toast, Popup, Picker } from "mint-ui";

export default {
  name: "co-date",
  data() {
    return {
      dateValue: "",
      pickerValue: new Date(),
      startDate: new Date("1949-10-01")
      // endDate: new Date("2100-10-01")
    };
  },
  props: {
    label: String,
    placeholder: String,
    maxLength: String,
    prop: String,
    value: String,
    flag:String
    // endDate: Object
  },
  computed:{
    // 当flag为1时，最大日期为当前日期
    endDate(){
      if(this.flag=="1"){
        return new Date();
      }else{
        return new Date('2100-10-1');
      }
    }
  },
  methods: {
    openPicker() {
      this.$refs.picker.open();
    },
    handleConfirm(data) {
      var _date = new Date(data);
      const y = _date.getFullYear();
      let m = _date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = _date.getDate();
      d = d < 10 ? "0" + d : d;
      var dateVal = y + "-" + m + "-" + d;
      this.$nextTick(() => {
        this.dateValue = dateVal;
        this.$refs._inut.value = this.dateValue 
      });
      
      // console.log(this.dateValue);
      // console.log(this.$refs._inut.value);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~common/scss/mint-ui.scss";
.form-control {
  text-align: right;
}
</style>